<script setup>
import {ref, reactive, onMounted, onBeforeUnmount} from "vue"
import {FormatDateFilter, SayGoodBye, SayHello} from "~/index.js"
const sayGoodBye = function() {
  SayGoodBye("爆米花小布")
} 

const sayHello = function() {
  SayHello("爆米花小布")
} 

const handleCopySuccess = function() {
  alert("复制成功")
}

const goodByeType = ref("normal")

const searchKey = ref("遥知不是雪")

let time = ref(new Date())

const data = reactive({
  list: [
   "梅",
    "王安石（宋）",
    "墙角数枝梅, 凌寒独自开。",
    "遥知不是雪, 为有暗香来。"
  ]
})

let timer = null
onMounted(() => {
  timer = window.setInterval(() => {
    time.value = new Date()
  }, 1000)
})

onBeforeUnmount(() => {
  window.clearInterval(timer)
})
</script>
<template>
  <div id="app">
    <div class="btn-box">
      <xiaobu-button :type="goodByeType" @click="sayGoodBye" text="再见"></xiaobu-button>
      <xiaobu-button type="danger" @click="sayHello" text="你好"></xiaobu-button>
    </div>


    <div class="time">{{ FormatDateFilter(time) }}</div>

    <div class="time">{{ FormatDateFilter(time,"date") }}</div>

    <div class="ancient-poetry">
        <p>卜算子·咏梅</p>
        <p> 【作者】陆游</p>
        <p>【朝代】宋</p>
        <p> 驿外断桥边，寂寞开无主。</p>
        <p> 已是黄昏独自愁，更着风和雨。</p>
        <p> 无意苦争春，一任群芳妒。</p>
        <p> 零落成泥碾作尘，只有香如故。</p>
        <xiaobu-button type="success" text="复制" v-copy="{text: '卜算子·咏梅 【作者】陆游 【朝代】宋 驿外断桥边，寂寞开无主。已是黄昏独自愁，更着风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。', successFn: handleCopySuccess}"></xiaobu-button>
    </div>

    <div class="replace">
      <input type="text" class="input" v-model="searchKey" placeholder="请输入关键字" />

      <div class="content">
        <ul class="search-list" :key="searchKey">
          <li class="search-item" v-for="(item, index) in data.list" :key="index">
            <p  v-html="item" v-replace="{replaceText: searchKey, replaceContent: `<span class='red'>${searchKey}</span>`}"></p>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>
<style lang="css" scoped>
ul, li {
  padding: 0;
  list-style: none;
}
#app {
  text-align: center;
}
.btn + .btn{
 margin-left: 20px;
}

#app .btn-box {
  margin-top: 60px;
}

#app .time {
  margin-top: 20px;
}

#app .replace {
  margin-top: 60px;
}

#app .replace .input {
  width: 300px;
  height: 34px;
  outline: none;
  border: 1px solid #e9e9e9;
  padding: 0 12px;
  line-height: 34px;
}

.search-item{
  text-align: center;
  margin-top: 12px;
}

#app .replace .search-item :deep() .red {
  color: red;
}
</style>
